<template>
    <section class="section">
        <div class="cell">
            <div class="left">
                <span class="label">持卡人</span><span>王小虎</span>
            </div>
        </div>
        <div class="cell">
            <div class="left">
                <span class="label">交易密码</span><input type="text" placeholder="请设置6位数字密码" />
            </div>
        </div>
        <div class="cell">
            <div class="left">
                <span class="label">交易密码</span><input type="text" placeholder="请再次输入交易密码" />
            </div>
        </div>
        <div class="cell">
            <div class="left">
                <span class="label">验证码</span><input type="text" placeholder="请输入短信验证码" />
            </div>
            <div class="right">
                <span>获取验证码</span>
            </div>
        </div>
    </section>
</template>

<style type="text/css" lang="less" scoped>
// keyword=##,##,##,###
.section{
    background: #fff;
    .cell{
        height: 112px;
        box-shadow: inset 0px -1px 0px 0px #F0F2F5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
            display: flex;
            align-items: center;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #121736;
            line-height: 48px;
            .label{
                width: 200px;
                padding-left: 32px;
            }
            input::placeholder{
                color: #B7B9C2;
            }
        }
        .right{
            padding-right: 32px;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #1BB855;
        }
    }
}

</style>
